.cl-manu-item {
  box-sizing: border-box;
  padding: var(--manu-item-padding);
  position: relative;
  display: flex;
  align-items: center;
  &:has(.active.cl-manu-item),
  &.active {
    & > .title-box {
      color: var(--manu-active-color);
    }
    &::before {
      box-shadow: inset 0 -2px 0 0 var(--manu-active-border-color);
    }
  }
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    transition: background-color 300ms, box-shadow 300ms;
  }
  .title-box {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    align-items: center;
    transition: color 300ms;
    & > i,
    & > .cl-icon {
      padding-right: 5px;
      font-weight: 700;
    }
    .title {
      width: max-content;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 5px;
      i.cl-down {
        transition: transform 300ms;
      }
    }
  }
  .cl-submanu {
    padding-top: var(--manu-child-spacing);
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 100%;
    opacity: 0;
    transform: translateY(100%) scaleY(0);
    transform-origin: top;
    transition: transform 300ms, opacity 300ms;
    background-color: var(--submanu-bgc);
    z-index: 2;
    .cl-submanu__content {
      border-radius: var(--manu-border-radius);
      box-shadow: 0 0 10px -5px var(--main-color-block);
      background-color: var(--manu-bgc);
    }
    .cl-submanu {
      padding: 0;
      padding-left: var(--manu-child-spacing);
      left: unset;
      bottom: unset;
      top: 0;
      right: 0;
      opacity: 0;
      transform: translateX(100%) scale(0);
      transform-origin: left top;
    }
    .cl-manu-item {
      padding: var(--submanu-item-padding);
      &:has(.active.cl-manu-item),
      &.active {
        & > .title-box {
          color: var(--manu-active-color);
        }
        &::before {
          box-shadow: none;
        }
      }
      .title i.cl-down {
        transform: rotate(-90deg);
      }
      &:hover {
        & > .cl-submanu {
          opacity: 1;
          transform: translateX(100%) scale(1);
        }
        & > .title-box {
          color: var(--manu-item-hover-color);
          & > .title i.cl-down {
            transform: rotate(90deg);
          }
        }
      }
      &:first-child::before {
        border-radius: var(--manu-border-radius) var(--manu-border-radius) 0 0;
      }
      &:last-child::before {
        border-radius: 0 0 var(--manu-border-radius) var(--manu-border-radius);
      }
    }
  }
  &:hover {
    &::before {
      background-color: var(--manu-item-hover-bgc);
    }
    & > .cl-submanu {
      opacity: 1;
      transform: translateY(100%) scaleY(1);
    }
    & > .title-box {
      color: var(--manu-item-hover-color);
      & > .title > i.cl-down {
        transform: rotate(180deg);
      }
    }
  }
  &.disabled {
    color: var(--manu-item-disabled-color);
    pointer-events: none;
    opacity: 0.5;
    & > .title-box {
      color: currentColor;
    }
    &::before {
      box-shadow: none;
    }
  }
}
.vertical {
  --manu-active-border-color: transparent !important;
  flex-direction: column;
  width: max-content;
  box-shadow: 1px 0 0 0 var(--manu-border-bottom-color);
  .cl-manu-item {
    --manu-child-spacing: 0;
    --manu-border-radius: 0;
    height: var(--manu-v-item-height);
    flex-direction: column;
    align-items: flex-start;
    .title-box {
      height: var(--manu-v-item-height);
      & > .title {
        max-width: 100vw;
        transition: max-width 300ms;
        & > i.cl-down {
          transform: rotate(-90deg);
        }
      }
    }
    .cl-submanu {
      top: 0;
      left: unset;
      right: 0;
      transform: translateX(100%) scaleX(0);
      transform-origin: left;
      height: max-content;
    }
    &:hover {
      &::before {
        background-color: var(--manu-item-hover-bgc);
      }
      & > .cl-submanu {
        opacity: 1;
        transform: translateX(100%) scaleX(1);
      }
      & > .title-box {
        color: var(--manu-item-hover-color);
        & > .title > i.cl-down {
          transform: rotate(90deg);
        }
      }
    }
  }
  &.collapse {
    & > .cl-manu-item {
      & > .title-box {
        & > i {
          padding: 0;
        }
        .title {
          width: 0;
          overflow: hidden;
        }
      }
    }
  }
}
